<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">In jqxComplexInput, the real and imaginary parts of the complex
        number can also be displayed in the exponential, scientific and engineering notations.
    </title>
    <meta name="description" content="In jqxComplexInput, the real and imaginary parts of the complex number can also be displayed in the exponential, scientific and engineering notations." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcomplexinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxComplexInput").jqxComplexInput({ width: 250, height: 25, decimalNotation: "exponential", value: "330000 - 200i", spinButtons: true });

            $("#settingsExpander").jqxExpander({ width: 400, height: 375, toggleMode: "none", showArrow: false });
            $("#notationsList").jqxDropDownList({ source: ["decimal", "exponential", "scientific", "engineering"], selectedIndex: 1, width: '200px', height: '25px', autoDropDownHeight: true });
            $("button").jqxButton({ width: 175 });

            $("#notationsList").on("change", function (event) {
                var args = event.args;
                if (args) {
                    var label = args.item.label;
                    if (label === "decimal") {
                        label = "default";
                    }
                    $("#jqxComplexInput").jqxComplexInput({ decimalNotation: label });
                }
            });

            // real part
            $("#getRealDecimal").click(function () {
                var decimalValue = $("#jqxComplexInput").jqxComplexInput("getReal");
                alert("Decimal value: " + decimalValue);
            });

            $("#getRealExponential").click(function () {
                var exponentialValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "real", "exponential");
                alert("Exponential notation: " + exponentialValue);
            });

            $("#getRealScientific").click(function () {
                var scientificValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "real", "scientific");
                alert("Scientific notation: " + scientificValue);
            });

            $("#getRealEngineering").click(function () {
                var engineeringValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "real", "engineering");
                alert("Engineering notation: " + engineeringValue);
            });

            // imaginary part
            $("#getImaginaryDecimal").click(function () {
                var decimalValue = $("#jqxComplexInput").jqxComplexInput("getImaginary");
                alert("Decimal value: " + decimalValue);
            });

            $("#getImaginaryExponential").click(function () {
                var exponentialValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "imaginary", "exponential");
                alert("Exponential notation: " + exponentialValue);
            });

            $("#getImaginaryScientific").click(function () {
                var scientificValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "imaginary", "scientific");
                alert("Scientific notation: " + scientificValue);
            });

            $("#getImaginaryEngineering").click(function () {
                var engineeringValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "imaginary", "engineering");
                alert("Engineering notation: " + engineeringValue);
            });
        });
    </script>
</head>
<body>
    <div id="jqxComplexInput" style="float: left;">
        <input type="text" />
        <div>
        </div>
    </div>
    <div id="settingsExpander" style="float: left; margin-left: 50px;">
        <div>
            jqxComplexInput Notation Settings</div>
        <div style="padding-left: 15px;">
            <h4>
                Choose notation:</h4>
            <div id="notationsList" style="margin-top: 20px;">
            </div>
            <div style="margin-top: 20px;">
                <h4>
                    Real part</h4>
                <button id="getRealDecimal">
                    Get decimal value</button>
                <button id="getRealExponential" style="margin-left: 5px;">
                    Get exponential notation</button><br />
                <br />
                <button id="getRealScientific">
                    Get scientific notation</button>
                <button id="getRealEngineering" style="margin-left: 5px;">
                    Get engineering notation</button></div>
            <div style="margin-top: 20px;">
                <h4>
                    Imaginary part</h4>
                <button id="getImaginaryDecimal">
                    Get decimal value</button>
                <button id="getImaginaryExponential" style="margin-left: 5px;">
                    Get exponential notation</button><br />
                <br />
                <button id="getImaginaryScientific">
                    Get scientific notation</button>
                <button id="getImaginaryEngineering" style="margin-left: 5px;">
                    Get engineering notation</button></div>
        </div>
    </div>
</body>
</html>